<!DOCTYPE html>
<html lang="cn" window-frame="solid-with-shadow" window-icon="../images/icon/icon.ico">
<head>
    <meta charset="UTF-8">
    <title>BS Redis Desktop Client</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        @import "../css/define.css";
        html, body {
            width: 100%;
            height: 100%;
            background: #fff;
        }

        .form {
            margin: 15px;
            flow: vertical;
            vertical-align: top;
        }

        .form .row {
            width: 100%;
            flow: horizontal;
            padding: 5px 0;
        }

        .form .row .t {
            width: 70px;
            text-align: right;
            padding: 3px 10px 3px 0;
        }

        .form .row .i {
            size: *;
            flow: horizontal;
            vertical-align: middle;
            horizontal-align: left;
        }

        .form .row .i input, .form .row .i select {
            size: *;
            padding: 5px 6px;
        }

        .form .row .i select option {
            padding: 4px 6px;
            cursor: pointer;
        }

        .form .row .i select option:hover {
            background: @background;
            color: #1e1e1e;
        }
    </style>
</head>
<body>
<div styleset="#title-bar" role="window-caption">
    <div class="title-bar-title">
        <img class="app-icon" src="../images/icon/app.png" height="16px"/>
        <span class="app-name"></span>
    </div>
    <div class="title-bar-action">
        <button class="btn exit" id="exit"></button>
    </div>
</div>
<div id="form"></div>
<script type="module">
    import tools from "../js/tools"

    const view = tools.getView()
    const parameters = tools.getParameters()
    document.$(".app-name").innerText = parameters.title
    document.on("click", "#exit", () => {
        view.close("close")
    })

    class Form extends Element {
        constructor() {
            super()
        }

        render() {
            return <div class="form">
                <div class="row">
                    <div class="t">
                        旧key
                    </div>
                    <div class="i">
                        <input type="text" value={parameters.key}
                               disabled="disabled"
                               placeholder={"请输入key"}/>
                    </div>
                </div>
                <div class="row">
                    <div class="t">
                        时间
                    </div>
                    <div class="i">
                        <input type="text"
                               onChange={(...args) => this.keyChange(...args)}
                               placeholder={"-1清除过期时间"}/>
                    </div>
                </div>
                <div class="row">
                    <div class="t">
                        时间类型
                    </div>
                    <div class="i">
                        <select class="type" value="1" onChange={(...args) => this.timeTypeChange(...args)}
                                placeholder={"请选择时间类型"}>
                            <option value="1">秒</option>
                            <option value="2">毫秒</option>
                        </select>
                    </div>
                </div>
                <div class="row" style="margin-top:10px">
                    <div class="t"></div>
                    <div class="i">
                        <button class="btn btn-primary" onClick={() => this.ok()}>提交</button>
                        <button class="btn btn-primary" onClick={() => this.cancel()} style="margin-left:10px">取消
                        </button>
                    </div>
                </div>
            </div>
        }

        form = {
            time: "",
            type: "1"
        }

        keyChange(evt, ele) {
            this.form.time = ele.value
        }

        timeTypeChange(evt, ele) {
            this.form.type = ele.value
        }

        ok() {
            if (this.form.time !== "-1" && !/^\d+$/ig.test(this.form.time)) {
                tools.alert("过期时间错误!")
                return
            }
            if (parameters.view.xcall("set_expire", parameters.key, this.form.type, this.form.time)) {
                tools.alert("修改成功")
                    .then(() => {
                        view.close(true)
                    })
            } else {
                tools.alert('修改失败')
            }

        }

        cancel() {
            view.close("close")
        }
    }

    document.$("#form").patch(<Form/>)
</script>
</body>
</html>